import { useNavigate } from 'react-router-dom';
import { useGameStore } from '../store/gameStore';
import { Play, Settings, BookOpen, Trophy } from 'lucide-react';
import { useEffect, useState } from 'react';

export default function Home() {
  const navigate = useNavigate();
  const { playerProgress } = useGameStore();
  const [showTitle, setShowTitle] = useState(false);

  // 标题动画效果
  useEffect(() => {
    const timer = setTimeout(() => setShowTitle(true), 500);
    return () => clearTimeout(timer);
  }, []);

  // 获取游戏统计
  const getGameStats = () => {
    const levels = Object.values(playerProgress);
    const completedLevels = levels.filter(level => level.stars > 0).length;
    const totalStars = levels.reduce((sum, level) => sum + (level.stars || 0), 0);
    const totalScore = levels.reduce((sum, level) => sum + (level.bestScore || 0), 0);
    
    return { completedLevels, totalStars, totalScore };
  };

  const stats = getGameStats();

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-amber-900 relative overflow-hidden">
      {/* 背景装饰 - 水墨效果 */}
      <div className="absolute inset-0">
        {/* 山水背景 */}
        <div className="absolute inset-0 opacity-20">
          <div className="absolute bottom-0 left-0 w-full h-2/3 bg-gradient-to-t from-slate-800 to-transparent" />
          <div className="absolute bottom-0 left-1/4 w-32 h-48 bg-gradient-to-t from-slate-700 to-transparent rounded-t-full transform -rotate-12" />
          <div className="absolute bottom-0 right-1/3 w-40 h-56 bg-gradient-to-t from-slate-600 to-transparent rounded-t-full transform rotate-6" />
          <div className="absolute bottom-0 right-1/4 w-24 h-32 bg-gradient-to-t from-slate-700 to-transparent rounded-t-full transform rotate-12" />
        </div>
        
        {/* 飘落的花瓣/雪花效果 */}
        <div className="absolute inset-0 pointer-events-none">
          {Array.from({ length: 20 }, (_, i) => (
            <div
              key={i}
              className="absolute w-2 h-2 bg-amber-200 rounded-full opacity-30 animate-pulse"
              style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${3 + Math.random() * 2}s`
              }}
            />
          ))}
        </div>
      </div>

      {/* 主要内容 */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-6">
        {/* 游戏标题 */}
        <div className={`text-center mb-12 transition-all duration-1000 ${
          showTitle ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-8'
        }`}>
          <h1 className="text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-amber-400 to-amber-600 mb-4 font-serif">
            象棋守御
          </h1>
          <h2 className="text-2xl md:text-3xl text-amber-300 font-medium mb-2">
            楚汉烽烟
          </h2>
          <p className="text-amber-200 text-lg opacity-80">
            运筹帷幄，决胜千里
          </p>
        </div>

        {/* 主菜单按钮 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
          {/* 开始游戏 */}
          <button
            onClick={() => navigate('/levels')}
            className="group relative bg-gradient-to-br from-amber-600 to-amber-800 text-white p-8 rounded-2xl border-2 border-amber-500 hover:border-amber-400 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/25 transform hover:scale-105"
          >
            <div className="flex items-center justify-center gap-4">
              <Play className="w-8 h-8 group-hover:scale-110 transition-transform" />
              <div className="text-left">
                <div className="text-2xl font-bold">开始游戏</div>
                <div className="text-amber-200 text-sm">选择关卡开始征战</div>
              </div>
            </div>
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 transform translate-x-full group-hover:translate-x-[-200%] transition-transform duration-700" />
          </button>

          {/* 游戏设置 */}
          <button
            onClick={() => navigate('/settings')}
            className="group relative bg-gradient-to-br from-slate-600 to-slate-800 text-white p-8 rounded-2xl border-2 border-slate-500 hover:border-slate-400 transition-all duration-300 hover:shadow-2xl hover:shadow-slate-500/25 transform hover:scale-105"
          >
            <div className="flex items-center justify-center gap-4">
              <Settings className="w-8 h-8 group-hover:rotate-90 transition-transform duration-300" />
              <div className="text-left">
                <div className="text-2xl font-bold">游戏设置</div>
                <div className="text-slate-200 text-sm">调整音效和画质</div>
              </div>
            </div>
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 transform translate-x-full group-hover:translate-x-[-200%] transition-transform duration-700" />
          </button>
        </div>

        {/* 游戏统计 */}
        {stats.completedLevels > 0 && (
          <div className="mt-12 bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-amber-500/30">
            <h3 className="text-xl font-bold text-amber-300 mb-4 text-center flex items-center justify-center gap-2">
              <Trophy className="w-6 h-6" />
              游戏统计
            </h3>
            <div className="grid grid-cols-3 gap-6 text-center">
              <div>
                <div className="text-2xl font-bold text-white">{stats.completedLevels}</div>
                <div className="text-amber-200 text-sm">已完成关卡</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-yellow-400">{stats.totalStars}</div>
                <div className="text-amber-200 text-sm">获得星星</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-amber-400">{stats.totalScore.toLocaleString()}</div>
                <div className="text-amber-200 text-sm">总分数</div>
              </div>
            </div>
          </div>
        )}

        {/* 游戏介绍 */}
        <div className="mt-12 max-w-4xl text-center">
          <div className="bg-black/20 backdrop-blur-sm rounded-2xl p-8 border border-amber-500/20">
            <h3 className="text-2xl font-bold text-amber-300 mb-4 flex items-center justify-center gap-2">
              <BookOpen className="w-6 h-6" />
              游戏简介
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-amber-100">
              <div>
                <h4 className="font-bold text-amber-200 mb-2">游戏背景</h4>
                <p className="text-sm leading-relaxed">
                  时值"棋境"动荡，蕴含中华武运与智谋的"棋魂"四散。古代战场的英灵们受到侵蚀，
                  沿着象征着兵家必争之地的"棋路"向最后的"中军帐"进军。
                </p>
              </div>
              <div>
                <h4 className="font-bold text-amber-200 mb-2">游戏特色</h4>
                <ul className="text-sm leading-relaxed space-y-1">
                  <li>• 国粹融合：象棋棋子特性转化为塔防单位</li>
                  <li>• 意境美学：水墨画风、古琴音效</li>
                  <li>• 策略至上：单位搭配、摆放位置至关重要</li>
                  <li>• 名将风华：历史名将和经典兵种形象</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 版权信息 */}
        <div className="mt-8 text-center text-amber-200/60 text-sm">
          <p>© 2024 象棋守御：楚汉烽烟 - 传承中华文化，弘扬智慧之美</p>
        </div>
      </div>

      {/* 装饰性印章 */}
      <div className="absolute top-8 right-8 w-24 h-24 border-4 border-amber-500/30 rounded-full flex items-center justify-center transform rotate-12">
        <div className="text-amber-400 font-bold text-lg">楚汉</div>
      </div>
      <div className="absolute bottom-8 left-8 w-20 h-20 border-4 border-amber-600/30 rounded-full flex items-center justify-center transform -rotate-12">
        <div className="text-amber-500 font-bold">烽烟</div>
      </div>
    </div>
  );
}